import { Component, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: "tick-series-tick",
  template: `
      <span class="tick-cell" #tack>{{tick.time | date: 'H:mm:ss'}}</span>
      <span class="tick-cell" [ngClass]="getColorClass(tick)">{{getPrice(tick.price)}}</span>
      <span class="tick-cell volume" [ngClass]="getColorClass(tick)">{{tick.volume}}</span>
  `,
  styles: [
    `.tick-cell {
      width: 33%;
      flex-grow: 1;
      text-align: center;
      font-size: 1.4rem;
      line-height: 30px;
      cursor: default;
    }
    .color-green {
      color: #44BF3E;
    }
    .color-red {
      color: #F34A47;
    }
    .volume.color-green::after {
      content: "S";
    }
    .volume.color-red::after {
      content: "B";
    }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  inputs: [
    "tick"
  ]
})
export class TickSeriesTickComponent implements OnInit {

  constructor() { }

  ngOnInit() { 

  }

  getColorClass(tick) {
    return {
      "color-green": tick.direction === 0,
      "color-red": tick.direction === 1
    }
  }
  getPrice(price: number) {
    return price.toFixed(2);
  }

}